<template>
  <AdminLayout>
    <div class="dashboard">
      <!-- 页面顶部欢迎区域 -->
      <div class="dashboard-header">
        <div class="header-content">
          <h1>欢迎来到快飞者管理后台</h1>
          <p>这里是您的系统概览和数据分析中心</p>
        </div>
        <div class="header-actions">
          <button class="action-button">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19 13H5M19 13C19.55 13 20 12.55 20 12C20 11.45 19.55 11 19 11M19 13C19.55 13 20 13.45 20 14C20 14.55 19.55 15 19 15M5 13C4.45 13 4 12.55 4 12C4 11.45 4.45 11 5 11M5 13C4.45 13 4 13.45 4 14C4 14.55 4.45 15 5 15M17 3H7C5.9 3 5 3.9 5 5V19C5 20.1 5.9 21 7 21H17C18.1 21 19 20.1 19 19V5C19 3.9 18.1 3 17 3Z" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            导出报告
          </button>
          <button class="action-button primary">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 5V19M5 12H19M19 12L12 5M19 12L12 19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            刷新数据
          </button>
        </div>
      </div>
      
      <!-- 数据统计卡片区域 -->
      <div class="dashboard-cards">
        <div class="card card-primary">
          <div class="card-icon">
            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20 4H4C3.45 4 3 4.45 3 5V19C3 19.55 3.45 20 4 20H20C20.55 20 21 19.55 21 19V5C21 4.45 20.55 4 20 4Z" fill="white"/>
              <path d="M9 10H15V16H9V10Z" fill="#1a73e8"/>
              <path d="M5 10H7V16H5V10Z" fill="#1a73e8"/>
              <path d="M17 10H19V16H17V10Z" fill="#1a73e8"/>
            </svg>
          </div>
          <div class="card-content">
            <p class="card-title">产品总数</p>
            <p class="card-value">{{ productCount }}</p>
            <p class="card-change"><span>+12%</span> 较上月</p>
          </div>
        </div>
        
        <div class="card card-success">
          <div class="card-icon">
            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.59L19 8L10 17Z" fill="white"/>
            </svg>
          </div>
          <div class="card-content">
            <p class="card-title">活跃产品</p>
            <p class="card-value">{{ activeProductCount }}</p>
            <p class="card-change"><span>+8%</span> 较上月</p>
          </div>
        </div>
        
        <div class="card card-warning">
          <div class="card-icon">
            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V15H13V17ZM13 13H11V7H13V13Z" fill="white"/>
            </svg>
          </div>
          <div class="card-content">
            <p class="card-title">非活跃产品</p>
            <p class="card-value">{{ inactiveProductCount }}</p>
            <p class="card-change"><span>-5%</span> 较上月</p>
          </div>
        </div>
        
        <div class="card card-accent">
          <div class="card-icon">
            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16 6V4C16 2.9 15.1 2 14 2H4C2.9 2 2 2.9 2 4V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V8C22 6.9 21.1 6 20 6H16ZM15 15H9V17H15V15ZM19 9H5V5H19V9Z" fill="white"/>
            </svg>
          </div>
          <div class="card-content">
            <p class="card-title">产品总价值</p>
            <p class="card-value">¥{{ totalRevenue }}</p>
            <p class="card-change"><span>+20%</span> 较上月</p>
          </div>
        </div>
      </div>
      
      <!-- 图表区域 -->
      <div class="dashboard-charts">
        <div class="chart-container">
          <div class="chart-header">
            <h3>销售趋势</h3>
            <div class="chart-filters">
              <button class="filter-button active">月度</button>
              <button class="filter-button">季度</button>
              <button class="filter-button">年度</button>
            </div>
          </div>
          <div class="chart-placeholder">
            <!-- 销售趋势图表 -->
            <svg width="100%" height="400" viewBox="0 0 900 400" fill="none" xmlns="http://www.w3.org/2000/svg">
              <!-- 背景网格 -->
              <rect width="900" height="400" rx="8" fill="white" stroke="#f0f0f0" stroke-width="1"/>
              
              <!-- 水平网格线 -->
              <line x1="60" y1="350" x2="840" y2="350" stroke="#f0f0f0" stroke-width="1"/>
              <line x1="60" y1="300" x2="840" y2="300" stroke="#f0f0f0" stroke-width="1"/>
              <line x1="60" y1="250" x2="840" y2="250" stroke="#f0f0f0" stroke-width="1"/>
              <line x1="60" y1="200" x2="840" y2="200" stroke="#f0f0f0" stroke-width="1"/>
              <line x1="60" y1="150" x2="840" y2="150" stroke="#f0f0f0" stroke-width="1"/>
              <line x1="60" y1="100" x2="840" y2="100" stroke="#f0f0f0" stroke-width="1"/>
              <line x1="60" y1="50" x2="840" y2="50" stroke="#f0f0f0" stroke-width="1"/>
              
              <!-- 垂直网格线 -->
              <line x1="60" y1="50" x2="60" y2="350" stroke="#f0f0f0" stroke-width="1"/>
              <line x1="160" y1="50" x2="160" y2="350" stroke="#f0f0f0" stroke-width="1"/>
              <line x1="260" y1="50" x2="260" y2="350" stroke="#f0f0f0" stroke-width="1"/>
              <line x1="360" y1="50" x2="360" y2="350" stroke="#f0f0f0" stroke-width="1"/>
              <line x1="460" y1="50" x2="460" y2="350" stroke="#f0f0f0" stroke-width="1"/>
              <line x1="560" y1="50" x2="560" y2="350" stroke="#f0f0f0" stroke-width="1"/>
              <line x1="660" y1="50" x2="660" y2="350" stroke="#f0f0f0" stroke-width="1"/>
              <line x1="760" y1="50" x2="760" y2="350" stroke="#f0f0f0" stroke-width="1"/>
              <line x1="840" y1="50" x2="840" y2="350" stroke="#f0f0f0" stroke-width="1"/>
              
              <!-- 坐标轴标签 -->
              <text x="30" y="355" font-size="12" text-anchor="end" fill="#999">0</text>
              <text x="30" y="305" font-size="12" text-anchor="end" fill="#999">5000</text>
              <text x="30" y="255" font-size="12" text-anchor="end" fill="#999">10000</text>
              <text x="30" y="205" font-size="12" text-anchor="end" fill="#999">15000</text>
              <text x="30" y="155" font-size="12" text-anchor="end" fill="#999">20000</text>
              <text x="30" y="105" font-size="12" text-anchor="end" fill="#999">25000</text>
              
              <text x="60" y="380" font-size="12" text-anchor="middle" fill="#999">1月</text>
              <text x="160" y="380" font-size="12" text-anchor="middle" fill="#999">2月</text>
              <text x="260" y="380" font-size="12" text-anchor="middle" fill="#999">3月</text>
              <text x="360" y="380" font-size="12" text-anchor="middle" fill="#999">4月</text>
              <text x="460" y="380" font-size="12" text-anchor="middle" fill="#999">5月</text>
              <text x="560" y="380" font-size="12" text-anchor="middle" fill="#999">6月</text>
              <text x="660" y="380" font-size="12" text-anchor="middle" fill="#999">7月</text>
              <text x="760" y="380" font-size="12" text-anchor="middle" fill="#999">8月</text>
              <text x="840" y="380" font-size="12" text-anchor="middle" fill="#999">9月</text>
              
              <!-- 图表曲线 -->
              <path d="M60 250C100 220, 140 180, 160 200C200 230, 240 280, 260 250C300 210, 340 150, 360 180C400 220, 440 260, 460 230C500 190, 540 120, 560 150C600 190, 640 240, 660 220C700 190, 740 130, 760 160C800 200, 820 180, 840 150" stroke="#1a73e8" stroke-width="3" fill="none" stroke-linecap="round"/>
              
              <!-- 阴影区域 -->
              <path d="M60 250C100 220, 140 180, 160 200C200 230, 240 280, 260 250C300 210, 340 150, 360 180C400 220, 440 260, 460 230C500 190, 540 120, 560 150C600 190, 640 240, 660 220C700 190, 740 130, 760 160C800 200, 820 180, 840 150L840 350L60 350Z" fill="url(#salesGradient)" fill-opacity="0.2"/>
              
              <!-- 数据点 -->
              <circle cx="60" cy="250" r="6" fill="#1a73e8" stroke="white" stroke-width="2"/>
              <circle cx="160" cy="200" r="6" fill="#1a73e8" stroke="white" stroke-width="2"/>
              <circle cx="260" cy="250" r="6" fill="#1a73e8" stroke="white" stroke-width="2"/>
              <circle cx="360" cy="180" r="6" fill="#1a73e8" stroke="white" stroke-width="2"/>
              <circle cx="460" cy="230" r="6" fill="#1a73e8" stroke="white" stroke-width="2"/>
              <circle cx="560" cy="150" r="6" fill="#1a73e8" stroke="white" stroke-width="2"/>
              <circle cx="660" cy="220" r="6" fill="#1a73e8" stroke="white" stroke-width="2"/>
              <circle cx="760" cy="160" r="6" fill="#1a73e8" stroke="white" stroke-width="2"/>
              <circle cx="840" cy="150" r="6" fill="#1a73e8" stroke="white" stroke-width="2"/>
              
              <!-- 渐变定义 -->
              <defs>
                <linearGradient id="salesGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" stop-color="#1a73e8"/>
                  <stop offset="100%" stop-color="#4285f4"/>
                </linearGradient>
              </defs>
            </svg>
          </div>
        </div>
        
        <div class="chart-container">
          <div class="chart-header">
            <h3>热门产品</h3>
            <div class="chart-filters">
              <button class="filter-button active">销量</button>
              <button class="filter-button">收入</button>
            </div>
          </div>
          <div class="chart-placeholder">
            <!-- 热门产品图表 -->
            <svg width="100%" height="400" viewBox="0 0 900 400" fill="none" xmlns="http://www.w3.org/2000/svg">
              <!-- 背景网格 -->
              <rect width="900" height="400" rx="8" fill="white" stroke="#f0f0f0" stroke-width="1"/>
              
              <!-- 水平网格线 -->
              <line x1="60" y1="350" x2="840" y2="350" stroke="#f0f0f0" stroke-width="1"/>
              <line x1="60" y1="300" x2="840" y2="300" stroke="#f0f0f0" stroke-width="1"/>
              <line x1="60" y1="250" x2="840" y2="250" stroke="#f0f0f0" stroke-width="1"/>
              <line x1="60" y1="200" x2="840" y2="200" stroke="#f0f0f0" stroke-width="1"/>
              <line x1="60" y1="150" x2="840" y2="150" stroke="#f0f0f0" stroke-width="1"/>
              <line x1="60" y1="100" x2="840" y2="100" stroke="#f0f0f0" stroke-width="1"/>
              <line x1="60" y1="50" x2="840" y2="50" stroke="#f0f0f0" stroke-width="1"/>
              
              <!-- 垂直网格线 -->
              <line x1="60" y1="50" x2="60" y2="350" stroke="#f0f0f0" stroke-width="1"/>
              
              <!-- 坐标轴标签 -->
              <text x="30" y="355" font-size="12" text-anchor="end" fill="#999">0</text>
              <text x="30" y="305" font-size="12" text-anchor="end" fill="#999">50</text>
              <text x="30" y="255" font-size="12" text-anchor="end" fill="#999">100</text>
              <text x="30" y="205" font-size="12" text-anchor="end" fill="#999">150</text>
              <text x="30" y="155" font-size="12" text-anchor="end" fill="#999">200</text>
              <text x="30" y="105" font-size="12" text-anchor="end" fill="#999">250</text>
              <text x="30" y="55" font-size="12" text-anchor="end" fill="#999">300</text>
              
              <!-- 柱状图 -->
              <rect x="100" y="170" width="90" height="180" rx="6" fill="#4285f4" class="bar-hover"/>
              <rect x="220" y="100" width="90" height="250" rx="6" fill="#1a73e8" class="bar-hover"/>
              <rect x="340" y="130" width="90" height="220" rx="6" fill="#0d47a1" class="bar-hover"/>
              <rect x="460" y="80" width="90" height="270" rx="6" fill="#1565c0" class="bar-hover"/>
              <rect x="580" y="150" width="90" height="200" rx="6" fill="#1976d2" class="bar-hover"/>
              <rect x="700" y="120" width="90" height="230" rx="6" fill="#1e88e5" class="bar-hover"/>
              
              <!-- 柱状图数值标签 -->
              <text x="145" y="160" font-size="14" text-anchor="middle" fill="#333" font-weight="500">180</text>
              <text x="265" y="90" font-size="14" text-anchor="middle" fill="#333" font-weight="500">250</text>
              <text x="385" y="120" font-size="14" text-anchor="middle" fill="#333" font-weight="500">220</text>
              <text x="505" y="70" font-size="14" text-anchor="middle" fill="#333" font-weight="500">270</text>
              <text x="625" y="140" font-size="14" text-anchor="middle" fill="#333" font-weight="500">200</text>
              <text x="745" y="110" font-size="14" text-anchor="middle" fill="#333" font-weight="500">230</text>
              
              <!-- 产品名称标签 -->
              <text x="145" y="380" font-size="13" text-anchor="middle" fill="#666">5寸穿越机</text>
              <text x="265" y="380" font-size="13" text-anchor="middle" fill="#666">7寸穿越机</text>
              <text x="385" y="380" font-size="13" text-anchor="middle" fill="#666">10寸穿越机</text>
              <text x="505" y="380" font-size="13" text-anchor="middle" fill="#666">超轻固定翼</text>
              <text x="625" y="380" font-size="13" text-anchor="middle" fill="#666">工业级无人机</text>
              <text x="745" y="380" font-size="13" text-anchor="middle" fill="#666">配件套装</text>
            </svg>
          </div>
        </div>
      </div>
      
      <!-- 最近活动区域 -->
      <div class="dashboard-recent">
        <div class="section-header">
          <h3>最近活动</h3>
          <a href="#" class="view-all-link">查看全部</a>
        </div>
        <div class="recent-activities">
          <div class="activity-item" v-for="activity in recentActivities" :key="activity.id">
            <div class="activity-icon" :style="{ backgroundColor: activity.color }">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12.5 7H11V13L16.2 16.2L17 14.9L12.5 12.2V7Z" fill="white"/>
              </svg>
            </div>
            <div class="activity-content">
              <p class="activity-text">{{ activity.text }}</p>
              <p class="activity-time">{{ activity.time }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </AdminLayout>
</template>

<script>
import AdminLayout from './AdminLayout.vue'
import ProductStore from '../../services/ProductStore.js'
import OrderStore from '../../services/OrderStore.js'

export default {
  name: 'Dashboard',
  components: {
    AdminLayout
  },
  data() {
    return {
      productCount: 0,
      activeProductCount: 0,
      inactiveProductCount: 0,
      pendingOrders: 18,
      userCount: 1458,
      totalRevenue: '0',
      recentActivities: [
        {
          id: 1,
          text: '新订单 #ORD-7892 已创建',
          time: '2分钟前',
          color: '#4caf50'
        },
        {
          id: 2,
          text: '用户 张三 已注册',
          time: '15分钟前',
          color: '#2196f3'
        },
        {
          id: 3,
          text: '产品 "5寸穿越机" 库存已更新',
          time: '1小时前',
          color: '#ff9800'
        },
        {
          id: 4,
          text: '订单 #ORD-7889 已发货',
          time: '3小时前',
          color: '#9c27b0'
        },
        {
          id: 5,
          text: '系统维护已完成',
          time: '昨天 15:30',
          color: '#607d8b'
        }
      ]
    }
  },
  created() {
    // 加载产品统计数据
    this.loadProductStats();
    // 加载订单统计数据
    this.loadOrderStats();
    // 添加监听器以响应数据变化
    ProductStore.addListener(this.loadProductStats);
    OrderStore.addListener(this.loadOrderStats);
  },
  beforeUnmount() {
    // 移除监听器
    ProductStore.removeListener(this.loadProductStats);
    OrderStore.removeListener(this.loadOrderStats);
  },
  methods: {
    // 加载产品统计数据
    async loadProductStats() {
      const allProducts = ProductStore.getAllProducts();
      const activeProducts = ProductStore.getActiveProducts();
      const productStats = await ProductStore.getProductStats();
      
      this.productCount = allProducts.length;
      this.activeProductCount = activeProducts.length;
      this.inactiveProductCount = allProducts.length - activeProducts.length;
      // 格式化产品总价值为千分位格式
      this.totalRevenue = productStats.totalValue.toLocaleString();
    },
    
    // 加载订单统计数据
    loadOrderStats() {
      // 先确保订单数据已加载
      if (!OrderStore.isLoading) {
        OrderStore.loadOrders().catch(error => {
          console.error('Failed to load orders:', error);
        });
      }
      
      // 获取待处理订单数量
      const pendingOrders = OrderStore.getOrdersByStatus('pending');
      this.pendingOrders = pendingOrders.length;
    }
  }
}</script>

<style scoped>
/* 全局样式重置 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f5f7fa;
  margin: 0;
  padding: 0;
}

/* Dashboard主容器 - 全屏无空白 */
.dashboard {
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 60px);
  padding: 20px;
  position: relative;
  background: linear-gradient(135deg, rgba(245, 247, 250, 0.8) 0%, rgba(211, 211, 211, 0.2) 100%);
}

/* Dashboard头部 */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
}

.header-content h1 {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.header-content p {
  color: #666;
  font-size: 16px;
  line-height: 1.5;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.action-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: white;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-button:hover {
  background-color: #f8f9fa;
  border-color: #1a73e8;
  color: #1a73e8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.action-button.primary {
  background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);
  border-color: #1a73e8;
  color: white;
}

.action-button.primary:hover {
  background: linear-gradient(135deg, #1565c0 0%, #3d7dea 100%);
  border-color: #1565c0;
  color: white;
}

/* 数据统计卡片区域 */
.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 25px;
}

.card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid #f0f0f0;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}

.card-primary {
  background: linear-gradient(135deg, rgba(26, 115, 232, 0.05) 0%, rgba(255, 255, 255, 1) 100%);
}

.card-primary::before {
  background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);
}

.card-success {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.05) 0%, rgba(255, 255, 255, 1) 100%);
}

.card-success::before {
  background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
}

.card-warning {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.05) 0%, rgba(255, 255, 255, 1) 100%);
}

.card-warning::before {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
}

.card-accent {
  background: linear-gradient(135deg, rgba(21, 101, 192, 0.05) 0%, rgba(255, 255, 255, 1) 100%);
}

.card-accent::before {
  background: linear-gradient(135deg, #1565c0 0%, #1e88e5 100%);
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);
}

.card-success .card-icon {
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
}

.card-warning .card-icon {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
}

.card-accent .card-icon {
  background: linear-gradient(135deg, #1565c0 0%, #1e88e5 100%);
}

.card-content {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 6px;
  font-weight: 500;
}

.card-value {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}

.card-change {
  font-size: 13px;
  color: #999;
}

.card-change span {
  color: #4caf50;
  font-weight: 600;
}

/* 图表区域 */
.dashboard-charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 25px;
}

.chart-container {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
  height: fit-content;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  letter-spacing: -0.3px;
}

.chart-filters {
  display: flex;
  gap: 8px;
}

.filter-button {
  padding: 6px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background-color: white;
  color: #666;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-button:hover {
  background-color: #f8f9fa;
  border-color: #1a73e8;
  color: #1a73e8;
}

.filter-button.active {
  background-color: #1a73e8;
  border-color: #1a73e8;
  color: white;
}

.chart-placeholder {
  width: 100%;
  height: 350px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 柱状图悬停效果 */
.bar-hover {
  transition: all 0.3s ease;
}

.bar-hover:hover {
  transform: translateY(-3px);
  filter: brightness(1.1);
}

/* 最近活动区域 */
.dashboard-recent {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  letter-spacing: -0.3px;
}

.view-all-link {
  font-size: 13px;
  color: #1a73e8;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.view-all-link:hover {
  color: #0d47a1;
  text-decoration: underline;
}

.recent-activities {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.activity-item:hover {
  background-color: #f0f2f5;
  transform: translateX(3px);
}

.activity-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background-color: currentColor;
  border-radius: 3px 0 0 3px;
}

.activity-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.activity-content {
  flex: 1;
}

.activity-text {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
  line-height: 1.5;
}

.activity-time {
  font-size: 12px;
  color: #999;
  font-weight: 400;
}

/* 横屏适配 - 确保全屏无空白填充 */
@media (min-width: 1024px) {
  .dashboard {
    padding: 25px;
  }
}

/* 大屏幕优化 */
@media (min-width: 1600px) {
  .dashboard {
    padding: 30px;
  }
  
  .dashboard-cards {
    gap: 20px;
  }
  
  .dashboard-charts {
    gap: 20px;
  }
  
  .card {
    padding: 25px;
  }
  
  .chart-container {
    padding: 25px;
  }
  
  .dashboard-recent {
    padding: 25px;
  }
}
</style>